
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>证件上传系统</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background-color: #f8f9fa;
            margin: 5% auto;
            padding: 25px;
            width: 70%;
            max-width: 800px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .tab-container {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #dee2e6;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background: #e9ecef;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
        }
        .tab.active {
            background: #fff;
            border: 1px solid #dee2e6;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
        }
        .upload-section {
            display: none;
        }
        .upload-section.active {
            display: block;
        }
        .upload-area {
            border: 2px dashed #adb5bd;
            padding: 30px;
            text-align: center;
            margin: 15px 0;
            background: #fff;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        .preview-item {
            width: 120px;
            position: relative;
        }
        .preview-img {
            max-width: 100%;
            max-height: 100px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .remove-btn {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        .btn-group {
            margin-top: 20px;
            text-align: right;
        }
        .btn {
            padding: 8px 16px;
            margin-left: 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary {
            background: #007bff;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
<button id="openUpload">上传证件材料</button>

<div id="uploadModal" class="modal">
    <div class="modal-content">
        <div class="tab-container">
            <div class="tab active" data-target="idCard">身份证</div>
            <div class="tab" data-target="propertyCert">产权证</div>
            <div class="tab" data-target="application">申请书</div>
        </div>

        <div id="idCard" class="upload-section active">
            <h3>身份证上传</h3>
            <div class="upload-area" id="idCardArea">
                <p>请上传身份证正反面照片</p>
                <input type="file" class="file-input" accept="image/*" multiple>
            </div>
            <div class="preview-container" id="idCardPreview"></div>
        </div>

        <div id="propertyCert" class="upload-section">
            <h3>产权证上传</h3>
            <div class="upload-area" id="propertyCertArea">
                <p>请上传产权证照片（最多5张）</p>
                <input type="file" class="file-input" accept="image/*" multiple>
            </div>
            <div class="preview-container" id="propertyCertPreview"></div>
        </div>

        <div id="application" class="upload-section">
            <h3>申请书上传</h3>
            <div class="upload-area" id="applicationArea">
                <p>请上传申请书扫描件（PDF或图片）</p>
                <input type="file" class="file-input" accept="image/*,.pdf">
            </div>
            <div class="preview-container" id="applicationPreview"></div>
        </div>

        <div class="btn-group">
            <button class="btn" id="cancelBtn">取消</button>
            <button class="btn btn-primary" id="submitBtn">提交所有材料</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('uploadModal');
        const openBtn = document.getElementById('openUpload');
        const cancelBtn = document.getElementById('cancelBtn');
        const tabs = document.querySelectorAll('.tab');
        const sections = document.querySelectorAll('.upload-section');
        const fileInputs = document.querySelectorAll('.file-input');
        const previewContainers = {
            idCard: document.getElementById('idCardPreview'),
            propertyCert: document.getElementById('propertyCertPreview'),
            application: document.getElementById('applicationPreview')
        };

        // 打开弹窗
        openBtn.addEventListener('click', () => {
            modal.style.display = 'block';
        });

        // 关闭弹窗
        cancelBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        // 标签切换
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                sections.forEach(s => s.classList.remove('active'));

                tab.classList.add('active');
                const target = tab.getAttribute('data-target');
                document.getElementById(target).classList.add('active');
            });
        });

        // 文件上传处理
        fileInputs.forEach(input => {
            input.addEventListener('change', function(e) {
                const files = e.target.files;
                const sectionId = this.closest('.upload-section').id;
                const previewContainer = previewContainers[sectionId];

                previewContainer.innerHTML = '';

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    if (!file.type.match('image.*') && !file.type.match('application/pdf')) {
                        alert('请上传图片或PDF文件');
                        continue;
                    }

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const previewItem = document.createElement('div');
                        previewItem.className = 'preview-item';

                        if (file.type.match('image.*')) {
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            img.className = 'preview-img';
                            previewItem.appendChild(img);
                        } else {
                            const icon = document.createElement('div');
                            icon.textContent = 'PDF文件';
                            icon.style.padding = '10px';
                            icon.style.border = '1px solid #ddd';
                            previewItem.appendChild(icon);
                        }

                        const removeBtn = document.createElement('span');
                        removeBtn.className = 'remove-btn';
                        removeBtn.innerHTML = '×';
                        removeBtn.addEventListener('click', () => {
                            previewItem.remove();
                        });

                        previewItem.appendChild(removeBtn);
                        previewContainer.appendChild(previewItem);
                    }
                    reader.readAsDataURL(file);
                }
            });
        });

        // 提交处理
        document.getElementById('submitBtn').addEventListener('click', function() {
            // 这里添加实际提交逻辑
            alert('材料提交成功！');
            modal.style.display = 'none';
        });
    });
</script>
</body>
</html>
